.container {
    display: flex;
    flex-direction: column;
}

.s {
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.div-animation-1 {
    width: 100%;
    height: 300px;
    align-items: center;
    background-color: antiquewhite;
    margin-top: 16px;
}

.animation-1 {
    width: 50px;
    height: 50px;
    background-color: brown;
    animation: keyframesanimation 5s infinite alternate;
}

@keyframes keyframesanimation {
    from {
        background-color: #f76160;
        transform: translate(10px) rotate(0deg) scale(1.0);
    }

    /* 可以通过百分比指定动画运行的中间状态6+ */

    50% {
        background-color: yellowgreen;
        transform: translate(100px) rotate(60deg) scale(1.3);
    }

    to {
        background-color: #09ba07;
        transform: translate(200px) rotate(180deg) scale(2.0);
    }
}

.div-animation-2 {
    width: 100%;
    height: 300px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rosybrown;
    margin-top: 16px;
}

.animation-2 {
    background-color: #FF4500;
    width: 100px;
    height: 100px;
}

.animation-2-a {
    animation: simpleFrames2 3s;
}

@keyframes simpleFrames2 {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(100px);
    }
}

.div-animation-3 {
    width: 100%;
    height: 300px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: lightblue;
    margin-top: 16px;
}

.animation-3 {
    width: 100%;
    height: 100%;
    background-image: url('/common/images/heartBeat.png');
    background-repeat: no-repeat;
    background-position: 0% 0%;
    animation-name: heartBeating;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes heartBeating {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 100% 100%;
    }
}














